<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 待发货订单
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
<!--      <el-table-->
<!--          :data="tableData"-->
<!--          border-->
<!--          class="table"-->
<!--          ref="multipleTable"-->
<!--          header-cell-class-name="table-header"-->
<!--          @selection-change="handleSelectionChange">-->
<!--        <el-table-column type="selection" width="55" align="center"></el-table-column>-->
<!--        <el-table-column prop="hostid" label="用户id"></el-table-column>-->
<!--        <el-table-column prop="orderNo" label="订单号"></el-table-column>-->
<!--        <el-table-column prop="statusDesc" label="订单状态"></el-table-column>-->
<!--        <el-table-column prop="createTime" label="订单创建时间"></el-table-column>-->
<!--        <el-table-column prop="payment" label="金额"></el-table-column>-->
<!--        <el-table-column prop="receiverName" label="收货人"></el-table-column>-->
<!--        <el-table-column prop="receiverMobile" label="联系方式"></el-table-column>-->
<!--        <el-table-column prop="receiverProvince" label="收货地址"></el-table-column>-->
<!--        <el-table-column prop="receiverZip" label="邮编"></el-table-column>-->
<!--        <el-table-column label="操作" width="180" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button v-if="scope.row.statusDesc== '已支付'"-->
<!--                       type="text"-->
<!--                       icon="el-icon-edit"-->
<!--                       @click="handleEdit(scope.$index, scope.row)"-->
<!--            >发货</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
      <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
        <el-table-column
            prop="tribunal_describe"
            label="描述"
            width="600">
        </el-table-column>
        <el-table-column
            prop="name"
            label="买家:卖家"
            width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.user_vote }}:{{ scope.row.store_vote }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="result"
            label="结果">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            :filters="[{ text: '收集证据中', value: 0 }, { text: '评审中', value: 1 }, { text: '已结案', value: 2 }]"
            :filter-method="filterStatus"
            filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag type="danger" effect="dark" v-if="scope.row.status==0">收集证据中</el-tag>
            <el-tag type="success" effect="dark" v-if="scope.row.status==1">评审中</el-tag>
            <el-tag type="warning" effect="dark" v-if="scope.row.status==2">已结案</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            @current-change="handlePageChange"
            layout="total, prev, pager, next"
            :current-page="pagination.pageIndex"
            :page-size="pagination.pageSize"
            :total="pagination.total">
          <!--:total="pageTotal"-->
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getTribunalList } from '../../api';
import axios from "axios";
const connect=axios.create({
  // baseURL:"http://192.168.55.74:8081"
  baseURL:"http://10.22.112.205:8081"
})
export default {
  name: 'Tribunal',
  data() {
    return {
      pagination: {
        pageIndex: 1,
        pageSize: 5,
        total: 0,
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      formLabelWidth: '120px',
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      var params = {
        pageIndex: this.pagination.pageIndex,
        pageSize: this.pagination.pageSize,
        store_id: localStorage.getItem("storeId")
      };
      console.log(params)
      getTribunalList(params).then(res => {
        if (res.status == 200) {
          this.tableData = res.list;
          this.pagination.total = res.number;
        }else {
          this.$message.error(res.msg);
        }
      });
    },
    handleClick(row) {
      this.$router.replace({
        path: "/tribunalDetail",
        query: {
          tribunal_id: row.tribunal_id,
          good_id: row.good_id,
          orderNo: row.orderNo,
        }
      })
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页导航
    handlePageChange(val) {
      this.pagination.pageIndex = val;
      this.getData();
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    filterStatus(value, row) {
      return row.status === value;
    },
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 200px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
